<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <!-- 面包屑 -->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="/">流程引擎</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>流程表单类别</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <el-header>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="类别名称">
                        <el-input v-model="formInline.FormCategoryName" placeholder="请输入类别名称" clearable />
                    </el-form-item>
                    <el-form-item label="所属行业">
                        <el-select v-model="formInline.IndustryId" placeholder="请选择行业" clearable>
                            <el-option v-for="industry in industrys" :label="industry.industryName"
                                :value="industry.id" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="getTableData()">搜索</el-button>
                    </el-form-item>
                </el-form>


            </el-header>
            <el-main>
 
                <el-button type="success" size="small" @click="addDialog = true">新增</el-button>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" label="序号" width="150" />
                    <el-table-column prop="formCategoryCode" label="分类编号" width="120" />
                    <el-table-column prop="formCategoryName" label="分类名称" width="120" />
                    <el-table-column prop="industryName" label="所属行业" width="120" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template #default="scope">
                            <el-button type="danger" size="small" @click="del(scope.row)">
                                删除
                            </el-button>
                            <el-button type="primary" size="small" @click="toEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>



            </el-main>
        </el-container>
    </div>


    <!-- 会话框,最外层 -->
    <el-dialog v-model="addDialog" title="新增" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="类别编号" >
                <el-input v-model="ruleForm.formCategoryCode" disabled="true" />
            </el-form-item>
            <el-form-item label="类别名称" prop="formCategoryName">
                <el-input v-model="ruleForm.formCategoryName" />
            </el-form-item>
            <el-form-item label="所属行业">
                <el-select v-model="ruleForm.industryId" placeholder="请选择行业" clearable>
                    <el-option v-for="industry in industrys" :label="industry.industryName" :value="industry.id" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script lang="ts" setup>
import myAxios from '@/http/axiosHelper';
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'

const formInline = reactive({
    IndustryId: null,
    FormCategoryName: ''
})
const tableData = ref([])

//查询table数据
const getTableData = () => {
    myAxios.get('/PERead/ProcessEngine/SearchFormCategory',{params:formInline}).then(res => {
        tableData.value = res.data.data
    })
}

const industrys = ref([{
    "id": 1,
    "industryName": "行政"
}])
const getIndustrys = () => {
    myAxios.get('/PERead/ProcessEngine/GetIndustry').then(res => {
        industrys.value = res.data.data

    })
}

const getCode = () => {
    myAxios.get('/PERead/ProcessEngine/GetFormCategoryCode',{params:formInline}).then(res => {

        ruleForm.formCategoryCode = res.data.data

    })

}

//删除 
const del = (row: any) => {
    console.log(row);
    
ElMessageBox.confirm(
    '确认删除吗?',
    '请确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      myAxios.put('/PEWrite/ProcessEngine/DelFormCategory',{id:row.id}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg);
            getTableData();
        }
      });
        
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//编辑
const toEdit = (row: any) => {

}


//新增
const addDialog = ref(false)

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "formCategoryName": "",
    "formCategoryCode": "",
    "industryId": null
})

const rules = reactive<FormRules>({
    formCategoryName: [
        { required: true, message: '请输入类别名称', trigger: 'blur' },
        { min: 2, max: 15, message: '类别名称长度为2-15', trigger: 'blur' },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            myAxios.post('/PEWrite/ProcessEngine/CreateFormCategory',ruleForm).then(res=>{
                if(res.data.code==200){
                        ElMessage.success(res.data.msg);

                        addDialog.value=false;

                        getTableData();
                        getCode();
                }
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    getIndustrys();
    getTableData();
    getCode();
})
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>